<template>
  <div class="home">
    <Header></Header>
    <van-notice-bar left-icon="volume-o" text="欢迎光临，让我们一起沉浸在这份来自山川湖海的茶香之旅中！【新品特惠】探索自然之味，品味醇厚茶香！本店精选上等茶叶，每一叶都蕴含大自然的精华与茶农的匠心。" />

    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" style="width: 100%; height: auto;" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <Icons></Icons>

    <div class="home-image1">
      <img src="@/assets/img/dhp.jpeg" alt="">
    </div>
    

    <Recommend></Recommend>


    <div class="home-image2">
      <img src="@/assets/img/tgy.jpeg" alt="">
    </div>

    <div class="title">
        <van-divider dashed 
        :style="{ color: '#cdb89d', borderColor: 'rgb(226, 25, 25)', padding: '0 16px' }"
        >猜你喜欢</van-divider>
    </div>
    <Like></Like>

    <TabberBar></TabberBar>
  </div>
</template>

<script>
import TabberBar from '@/components/common/Tabber.vue';
import Header from '@/components/home/Header.vue';
import Icons from '@/components/home/Icons.vue';
import Recommend from '@/components/home/Recommend.vue';
import Like from '@/components/home/Like.vue';



export default {
  name: 'HomeView',
  components: {
    TabberBar,
    Header,
    Icons,
    Recommend,
    Like,
  },
  data() {
    return {
      images: [
        require('@/assets/img/swiper1.jpeg'),
        require('@/assets/img/swiper2.jpeg'),
        require('@/assets/img/swiper3.jpeg'),
      ],
    }
  }
}
</script>

<style scoped>
.van-notice-bar {
  margin-top: 70px;
}
.my-swipe .van-swipe-item {
  color: #c5e7c9;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #c5e7c9;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.home-image1 img{
  margin-top: 10px;
  margin-bottom: 40px;
}
.home-image2 img{
  margin-top: 30px;
  margin-bottom: 40px;
}
.van-divider{
    font-size: 24px;
    font-weight: bold;
}

</style>
